<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid布局</title>
</head>
<style>
    .grid{
        display: grid;
        width: 600px;
        height: 300px;
        background-color: blanchedalmond;
        border: 2px dashed black;
        margin: auto;
        margin-bottom: 14px;
    }
    .column{
        background-color: rgb(80, 167, 238);
        border-radius: 7px;
        border: 1px bisque solid;
        font-size: 18px;
        text-align: center;
    }
    /* grid-template-columns */
    .grid1{
        grid-template-columns: repeat(3,100px);
    }
    .grid2{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .grid3{
        grid-template-columns: 1fr 2fr 1fr;
        gap: 20px;
    }
    /* grid-template-areas */
    .layout{
        grid-template-areas:
        "header header header"
        "aside main main"
        "footer footer footer"; 
    }
    .header1{
        grid-area: header;
        background-color: rgb(207, 233, 58);
        border-radius: 7px;
        border: 1px bisque solid;
        text-align: center;
    }
    .aside1{
        grid-area: aside;
        background-color: rgb(13, 145, 143);
        border-radius: 7px;
        border: 1px bisque solid;
        text-align: center;
    }
    .main1{
        grid-area: main;
        background-color: rgb(80, 167, 238);
        border-radius: 7px;
        border: 1px bisque solid;
        text-align: center;
    }
    .footer1{
        grid-area: footer;
        background-color: rgb(80, 238, 148);
        border-radius: 7px;
        border: 1px bisque solid;
        text-align: center;
    }
</style>
<body>
    <!-- grid-template-columns -->
    <div class="grid grid1">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid2">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid3">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <!-- grid-template-areas -->
    <div class="grid layout">
        <header class="header1">头部</header>
        <aside class="aside1">侧边栏</aside>
        <main class="main1">内容</main>
        <footer class="footer1">底部</footer>
    </div>
    <!-- 对齐 -->
    <div class="grid grid4" style="display: grid; align-items: start; grid-template-columns:repeat(3,200px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid5" style="display: grid; align-items: center; grid-template-columns:repeat(3,200px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid6" style="display: grid; align-items: end; grid-template-columns:repeat(3,200px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid7" style="display: grid; align-items: end; justify-items: start; grid-template-columns:repeat(3,200px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid8" style="display: grid; align-items: end; justify-items: center; grid-template-columns:repeat(3,200px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid9" style="display: grid; align-items: end; justify-items: end; grid-template-columns:repeat(3,200px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid10" style="display: grid; align-items: end; justify-content: space-between; grid-template-columns:repeat(3,150px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid11" style="display: grid; align-items: end; justify-content: space-around; grid-template-columns:repeat(3,150px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid12" style="display: grid; align-items: end; justify-content: space-evenly; grid-template-columns:repeat(3,150px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid13" style="display: grid; align-content: center; grid-template-columns:repeat(3,200px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid14" style="display: grid; align-content: end; grid-template-columns:repeat(3,200px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid15" style="display: grid; align-content: end; justify-content: center; grid-template-columns:repeat(3,150px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
    <div class="grid grid16" style="display: grid; align-content: end; justify-content: space-between; grid-template-columns:repeat(3,150px);">
        <div class="column 1">column1</div>
        <div class="column 2">column2</div>
        <div class="column 3">column3</div>
        <div class="column 4">column4</div>
        <div class="column 5">column5</div>
        <div class="column 6">column6</div>
    </div>
</body>
</html>